<template>
	<view>
	<view class="bg">
		<view class="info row-h-center">
			<image src="/static/images/my_face.png" class="avater"></image>
			<view class="col" style="margin-left: 24rpx;">
				<view class="name">张三</view>
				<view class="row-h-center" style="margin-top: 10rpx;">
					<image src="/static/images/mobile.png" class="mobile-img"></image>
					<view class="mobile">11111111</view>
				</view>
			</view>
		</view>
		<view class="real row-between-center">
			<view class="col">
				<view class="real-title">认证店铺</view>
				<view class="real-desc">认证店铺</view>
			</view>
			<view class="real-btn row-center">
				立即认证
			</view>
		</view>
	</view>

	<view class="count">
		<view class="count-top row-between" style="background-color: #3B60D3;">
			<view class="row-h-center" style="margin-left: 20rpx;margin-top: -20rpx;">
				<view class="count-bg row-center">
					<image style="width: 72rpx;height: 72rpx;" src="/static/images/wallet.png"></image>
				</view>
				<view class="col-center-start" style="margin-left: 20rpx;">
					<view class="count-title">我的账户</view>
					<view class="count-desc">这是认证店铺的好处说明</view>
				</view>
			</view>
			
			<view class="count-tongqian">
				<view class="rec">立即推荐</view>
			</view>
			
		</view>
		
		<view class="count-item col" style="margin-top: -5rpx;">
			<view class="count-item-key">
				总佣金
			</view>
			<view class="count-item-text2" style="margin-top: 10rpx;">
				2000
			</view>
			<view class="count-item-key">可提现金额<span class="count-price">800.00</span></view>
		</view>
		
		<view class="line">
		</view>
		<view class="row" style="margin-top: 20rpx;">
			<view class="cal-item row-center" @click="goGive">
				<view class="cal-text">佣金明细</view>
				<image src="/static/images/arrow_right_small.png" class="cal-arrow"></image>
			</view>
			<view class="cal-item row-center" @click="goWithdrawDetail">
				<view class="cal-text">提现明细</view>
				<image src="/static/images/arrow_right_small.png" class="cal-arrow"></image>
			</view>
			<view class="cal-item2 row-center"  @click="goWithdraw">
				<view class="cal-text2">立即提现</view>
				<image src="/static/images/arrow_right_small.png" class="cal-arrow"></image>
			</view>
		</view>
		<view style="height: 20rpx;"></view>
	</view>
	
	
	<view class="row-between-center manage">
		<view class="manage-item col-center" @click="goShops">
			<image src="/static/images/my_2.png" class="manage-img"></image>
			<view class="manage-text">我的商铺</view>
		</view>
		
		<view class="manage-item col-center" @click="goReport()">
			<image src="/static/images/sign.png" class="manage-img"></image>
			<view class="manage-text">报名活动</view>
		</view>
		<view class="manage-item col-center" @click="goFeedBack">
			<image src="/static/images/my_3.png" class="manage-img"></image>
			<view class="manage-text">意见反馈</view>
		</view>
	</view>
	
	<view class="other">
		<view class="row-between-center other-item" @click="goReceive">
			<view class="row" style="margin-left: 36rpx;">
				<image src="/static/images/ganlan1.png" class="other-icon"></image>
				<view class="other-text">我收到的橄榄枝</view>
			</view>
			<image src="/static/images/arrow_right.png" class="arrow"></image>
		</view>
		<view class="row-between-center other-item" @click="goSend">
			<view class="row" style="margin-left: 36rpx;">
				<image src="/static/images/ganlan2.png" class="other-icon"></image>
				<view class="other-text">我抛出的橄榄枝</view>
			</view>
			<image src="/static/images/arrow_right.png" class="arrow"></image>
		</view>
		<view class="row-between-center other-item" @click="goEach">
			<view class="row" style="margin-left: 36rpx;">
				<image src="/static/images/yinhangzhanghao.png" class="other-icon"></image>
				<view class="other-text">已互抛橄榄枝的商家</view>
			</view>
			<image src="/static/images/arrow_right.png" class="arrow"></image>
		</view>
		<view class="row-between-center other-item" @click="goCancel" >
			<view class="row" style="margin-left: 36rpx;">
				<image src="/static/images/yihupao.png" class="other-icon"></image>
				<view class="other-text">已申请解除的商家</view>
			</view>
			<image src="/static/images/arrow_right.png" class="arrow"></image>
		</view>
		<view class="row-between-center other-item" @click="goCard">
			<view class="row" style="margin-left: 36rpx;">
				<image src="/static/images/yihupao.png" class="other-icon"></image>
				<view class="other-text">设置提现银行账号</view>
			</view>
			<image src="/static/images/arrow_right.png" class="arrow"></image>
		</view>
	<view class="row-between-center other-item" @click="showService = true">
		<view class="row" style="margin-left: 36rpx;">
			<image src="/static/images/my_4.png" class="other-icon"></image>
			<view class="other-text">联系平台客服</view>
		</view>
		<image src="/static/images/arrow_right.png" class="arrow"></image>
	</view>
	<view class="row-between-center other-item" >
		<view class="row" style="margin-left: 36rpx;">
			<image src="/static/images/my_4.png" class="other-icon"></image>
			<view class="other-text">平台案例展示</view>
		</view>
		<image src="/static/images/arrow_right.png" class="arrow"></image>
	</view>
	<view class="row-between-center other-item" @click="goApply">
		<view class="row" style="margin-left: 36rpx;">
			<image src="/static/images/my_4.png" class="other-icon"></image>
			<view class="other-text">申请成为加盟商</view>
		</view>
		<image src="/static/images/arrow_right.png" class="arrow"></image>
	</view>
	<view class="row-between-center other-item" @click="goChange">
		<view class="row" style="margin-left: 36rpx;">
			<image src="/static/images/my_5.png" class="other-icon"></image>
			<view class="other-text">切换身份</view>
		</view>
		<image src="/static/images/arrow_right.png" class="arrow"></image>
	</view>
	<view class="row-between-center other-item" >
		<view class="row" style="margin-left: 36rpx;">
			<image src="/static/images/chaoguan.png" class="other-icon"></image>
			<view class="other-text">超级管理员入口</view>
		</view>
		<image src="/static/images/arrow_right.png" class="arrow"></image>
	</view>
	</view>
	<view style="height: 80rpx;"></view>
		<tabbar :tabIndex="3"></tabbar>
		
		<u-popup :show="showService" @close="close" @open="open" mode="center" :round="24">
	            <view class="service col-center">
					<view class="code"></view>
					<view class="code-name">扫码添加客服微信</view>
					<view class="mobile row-center">13008329321</view>
					<view class="code-btn row-center" >拨打</view>
					<view style="height: 40rpx;"></view>
	            </view>
			</u-popup>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showService:false
			}
		},
		methods: {
			goGive(){
				uni.navigateTo({
					url:'/src/pages/user_my/give_detail'
				})
			},
			goWithdrawDetail(){
				uni.navigateTo({
					url:'/src/pages/user_my/withdraww_detail'
				})
			},
			goWithdraw(){
				uni.navigateTo({
					url:'/src/pages/user_my/withdraw'
				})
			},
			goShops(){
				uni.navigateTo({
					url:'/src/pages/user_my/my_shops'
				})
			},
			goFeedBack(){
				uni.navigateTo({
					url:'/src/pages/user_my/feeback'
				})
			},
			goReport(){
				uni.navigateTo({
					url:'/src/pages/user_my/signed_activity'
				})
			},
			goReceive(){
				uni.navigateTo({
					url:'/src/pages/user_my/receive_cooperate'
				})
			},
			goSend(){
				uni.navigateTo({
					url:'/src/pages/user_my/send_cooperate'
				})
			},
			goEach(){
				uni.navigateTo({
					url:'/src/pages/user_my/each_operate'
				})
			},
			goCancel(){
				uni.navigateTo({
					url:'/src/pages/user_my/cancel_cooperate'
				})
			},
			goCard(){
				uni.navigateTo({
					url:'/src/pages/user_my/card_info'
				})
			},
			goApply(){
				uni.navigateTo({
					url:'/src/pages/user_my/apply_merchant'
				})
			},
			goChange(){
				uni.navigateTo({
					url:'/src/pages/user_my/change_identify'
				})
			},
		}
	}
</script>
<style>
	page{
		background: #F2F3F8;
	}
</style>
<style lang="scss" scoped>
	.service{
		width: 568rpx;
		border-radius: 24rpx;
		background: white;
		.code{
			background-color: red;
			margin-top: 84rpx;
			width: 328rpx;
			height: 328rpx;
		}
		.code-name{
						margin-top: 30rpx;
			color: #1E2132;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 48rpx; /* 150% */
		}
		.mobile{
				margin-top: 30rpx;
			width: 328rpx;
			height: 72rpx;
			border-radius: 8rpx;
			background: #F2F3F8;
		}
		.code-btn{
			margin-top: 40rpx;
			width: 328rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: #347FFF;
			color: #FFF;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 48rpx; /* 150% */
		}
	}

	.real{
		width: calc(100% - 80rpx);
		position: absolute;bottom: 0;
		border-radius: 24rpx 24rpx 0 0 ;
		margin-left: 40rpx;
		margin-right: 40rpx;
		padding: 20rpx 40rpx;
		height: 120rpx;
		background: linear-gradient(90deg, #202A45 0%, #484E63 100%);
		.real-title{
			color: #FCDBAB;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 600;
			line-height: 40rpx; /* 166.667% */
		}
		.real-desc{
			color: #AAB3C2;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx; /* 166.667% */
		}
		.real-btn{
			width: 124rpx;
			height: 48rpx;
			color: #323131;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx; /* 166.667% */
			border-radius: 24rpx;
			background: linear-gradient(270deg, #F8CE94 0%, #FCDFB5 100%);
		}
		
	}
.count{
	background-color: white;
	margin: 20rpx;
	.count-top{
		border-radius: 24rpx 24rpx 0 0 ;
		margin-top: 20rpx;
		height: 140rpx;
		background-color: #FF8934;
	}
	
	.count-bg{
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
	}
	.count-title{
		color: #FFF;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 600;
		line-height: 40rpx; 
	}
	.count-tongqian{
		margin-top: 20rpx;
		width: 156rpx;
		height: 156rpx;
		background-image: url('/static/images/tongqian.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		.rec{
			margin-top: 20rpx;
			padding: 4rpx 12rpx;
			border-radius: 24rpx;
			border: 2rpx solid #FFF;
			background: linear-gradient(270deg, rgba(248, 206, 148, 0.01) 0%, rgba(252, 223, 181, 0.01) 100%);
			color: #FFF;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx; /* 166.667% */
		}
	}
	.count-desc{
		color: #FFF;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx; /* 166.667% */
	}
	.count-rec{
		width: 124rpx;
		height: 48rpx;
		margin-right: 24rpx;
		border-radius: 24rpx;
		border: 2rpx solid #FFF;
		background: linear-gradient(270deg, rgba(248, 206, 148, 0.01) 0%, rgba(252, 223, 181, 0.01) 100%);
		color: #FFF;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx; /* 166.667% */
	}
	
	.count-item{
		padding: 30rpx 20rpx;
		background-color: white;
		border-radius: 12rpx 24rpx 0 0;
		.count-item-text{
			color:  #20252B;
			font-size: 48rpx;
			font-style: normal;
			font-weight: 700;
			line-height: 48rpx; /* 100% */
		}
		.count-item-text2{
			color:  #FF8934;
			font-size: 48rpx;
			font-style: normal;
			font-weight: 700;
			line-height: 48rpx; /* 100% */
		}
		.count-item-key{
			margin-top: 20rpx;
			color: #6A6876;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx; /* 166.667% */
		}
		.count-price{
			margin-left: 10rpx;
			color: #3B60D3;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 700;
			line-height: 44rpx; /* 157.143% */
		}
	}
	
	.line{
		margin-top: 30rpx;
		height: 1rpx;
		background: #E6E6E6;
	}
	.cal-item{
		padding-left: 10rpx;
		padding-right: 10rpx;
		width: 33%;
		height: 40rpx;
		border-right: 1rpx solid #E6E6E6;
	}
	.cal-item2{
		padding-left: 10rpx;
		padding-right: 10rpx;
		width: 33%;
		height: 40rpx;
	}
	.cal-text{
		margin-right: 40rpx;
		color: #6A6876;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx; /* 166.667% */
	}
	.cal-arrow{
		width: 12rpx;
		height: 12rpx;
	}
	.cal-text2{
			margin-right: 40rpx;
		color: #3B60D3;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx; /* 166.667% */
	}
	
}	
	
.bg{
	position: relative;
	background-image: url('/static/images/my_bg.png');
	background-size: 100% 100%;
	position: relative;
	width: 100%;
	height: 400rpx;
	padding-top: 120rpx;
	.info{
		.avater{
			margin-left: 40rpx;
		
			width: 108rpx;
			height: 108rpx;
		}
		.name{
			color: #1E2132;
			font-size: 40rpx;
			font-style: normal;
			font-weight: 600;
			line-height: 44rpx; /* 110% */
		}
		.mobile{
			color: #000;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx; /* 180% */
		}
		.mobile-img{
			width: 19rpx;
			height: 21rpx;
		}
	}
}

.manage{
	margin: 20rpx;
	.manage-item{
		background: white;
		width: 216rpx;
		height: 184rpx;
	}
	.manage-img{
		width: 80rpx;
		height: 80rpx;
	}
	.manage-text{
		color: #20252B;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 44rpx; /* 157.143% */
	}
}

.other{
	border-radius: 20rpx;
	margin: 20rpx;
	background-color: white;
	.other-item{
		height: 104rpx;
		border-bottom: 1rpx solid #E6E6E6;
	}
	.other-item2{
		height: 104rpx;
	}
	.other-icon{
		width: 36rpx;
		height: 36rpx;
	}
	.other-text{
		margin-left: 22rpx;
		color:  #20252B;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 44rpx; /* 157.143% */
	}
	.arrow{
		margin-right: 36rpx;
		width: 16rpx;
		height: 28rpx;
	}
}

</style>
